<template>
  <ContentWrap>
    <el-card class="box-card !border-none" shadow="never">
      <el-form ref="searchFormRef" :model="tableData.searchParam" inline>
        <el-form-item label="手机号码">
          <el-input v-model="tableData.searchParam.mobile" placeholder="请输入手机号码" clearabl />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="tableData.searchParam.nickname" placeholder="请输入昵称" clearabl />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="tableData.searchParam.createTime"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon class="mr-5px" icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon class="mr-5px" icon="ep:refresh" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <div class="mt-[5px]">
        <el-table :data="tableData.list" size="large" v-loading="tableData.loading">
          <el-table-column label="店铺信息" min-width="120">
            <template #default="{ row }">
              <div
                class="flex flex-col items-start justify-start"
                :title="'店铺编号：' + row.shop?.id"
              >
                <img
                  class="w-[50px] h-[50px] mr-[10px] border border-solid border-gray-50"
                  :src="row.shop?.logo || '/placeholder.png'"
                  alt=""
                />
                <span>{{ row.shop?.name || '未知' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="绑定招商人员" min-width="160" align="left">
            <template #default="{ row }">
              <p>昵称：{{ row.agencyUser?.nickname || '无' }}</p>
              <p>电话：{{ row.agencyUser?.mobile || '无' }}</p>
            </template>
          </el-table-column>
          <el-table-column label="累计流水" min-width="180">
            <template #default="{ row }">
              <p class="flex flex-row items-center">
                <span
                  >{{ row.totalOrderCount }} 笔交易共 {{ fenToYuan(row.totalOrderPrice) }} 元</span
                >
              </p>
            </template>
          </el-table-column>
          <el-table-column label="累计营收" min-width="100">
            <template #default="{ row }">
              <p
                ><span class="text-orange-500">{{ fenToYuan(row.totalSettlementMoney) }}</span>
                元</p
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <Pagination
        v-model:limit="tableData.searchParam.pageSize"
        v-model:page="tableData.searchParam.pageNo"
        :total="tableData.total"
        @pagination="loadTableData"
      />
    </el-card>
  </ContentWrap>
</template>

<script lang="ts" setup>
import { FormInstance } from 'element-plus'
import { getPage } from '@/api/brokerage/merchant'
import { fenToYuan } from '@/utils'

defineOptions({ name: 'BrokerageMerchant' })

const tableData = reactive({
  total: 0,
  loading: true,
  list: [],
  searchParam: {
    pageNo: 1,
    pageSize: 10,
    mobile: '',
    nickname: '',
    createTime: []
  }
})

const route = useRoute()

const loadTableData = () => {
  tableData.loading = true
  getPage(tableData.searchParam)
    .then((res: any) => {
      tableData.loading = false
      tableData.list = res.list
      tableData.total = res.total
    })
    .catch(() => {
      tableData.loading = false
    })
}

const searchFormRef = ref<FormInstance>()

/** 搜索按钮操作 */
const handleQuery = () => {
  tableData.searchParam.pageNo = 1
  loadTableData()
}

/** 重置按钮操作 */
const resetQuery = () => {
  searchFormRef.value?.resetFields()
  tableData.searchParam = {
    pageNo: 1,
    pageSize: 10,
    mobile: '',
    nickname: '',
    createTime: []
  }
  handleQuery()
}

/** 初始化 **/
onMounted(() => {
  handleQuery()
})
</script>
